<template>
    <el-col :span="24" class="All">
        <el-col :span="2" class="spanInfo">
            <div class="searchIP">
                <el-input v-model="searchIP" placeholder="搜索IP" clearable></el-input>
            </div>
            <div class="textLable">
                <template v-for="(item) in columnsFn">
                    <el-button 
                        class="IpButton" 
                        :class="{'selected': item.selected}"
                        type="primary" 
                        @click="handSearchIp(item)" 
                        plain
                        :key="item.MONID">
                        {{ item.IP }}
                    </el-button>
                </template>
            </div>
        </el-col>
        <el-col :span="22" class="TableInfo">
            <div class="container">
                <v-historyToolBar
                    :fullPath='postData.opera'
                    :tableColumns='tableColumns'
                    @changeLie="getChangeLie"
                    @pickerDate="getPickerDate"
                    :tableData="tableData"
                    :tableDataFields="tableDataFieldsFn">
                </v-historyToolBar>
                <el-table
                    v-loading="loading"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    :data="tableData"
                    border
                    stripe
                    style="width: 100%">
                    <template v-for="(item) in tableColumns">
                    <el-table-column 
                        :prop="item.prop" 
                        :label="item.label"   
                        :width="item.width"
                        align="center"
                        v-if="item.isShow"
                        :key="item.prop">
                        <template v-slot="scope">
                            <template v-if="item.format == 'progress'">
                                <el-progress
                                    :percentage="Number(calcCheng(scope.row[item.prop], 100).toFixed(1))" 
                                    :color="TalallColorMethod">
                                </el-progress> 
                            </template>
                            <template v-else>
                                <div>
                                    {{ scope.row[item.prop] }}
                                </div>
                            </template>
                        </template>
                    </el-table-column>
                    </template>
                </el-table>
                <v-pagination
                    :dataTotal="dataTotal" 
                    :curPage="postData.curPage" 
                    :pageSize="postData.pageSize" 
                    @getCurPage="getPaginationCurPage"
                    @getPageSize="getPaginationPageSize">
                </v-pagination>
            </div>
        </el-col>
    
        
    </el-col>
</template>

<script>
import { fetchData } from '@/api/index.js'
import vPagination from 'common/Pagination.vue';
import vHistoryToolBar from 'historyData/HistoryToolBar.vue';
import tableColumns from './DbAsmGroupTableColumns.js';

export default {
    components: {
        vPagination, vHistoryToolBar
    },
    data() {
        return {
            postData: {
                opera: 'DBAsmGroupHistory', 
                curPage: 1,
                pageSize: 20,
                filtersType: 'fuzzyquery',
                filters: {
                    "monid":"",
                    "StartTime": "",
                    "EndTime": "",
                    "Name": ""
                }
            },
            tableData: [],
            dataTotal: 0,
            tableColumns: tableColumns,
            searchJson: {},

            postSearchData: {
                opera: 'dbAsmGroup',
                curPage: 1,
                pageSize: 20,
                sort: {
                    sortColumn: '',
                    sortOrders: ''
                },
                filtersType: 'fuzzyquery',
                filters: {}
            },
            columns: [],
            TextDatabace: {},
            searchIP: '',
            selectedIP: '',
            loading: true
        }
    },
    created() {
        this.getSearchData();
    },
    computed: {
        columnsFn() {
            return this.columns.filter((d) => {
                if (d.IP.includes(this.searchIP)) {
                    d['selected'] = false;
                    if (d.MONID == this.postData.filters.monid) {
                        d['selected'] = true;
                    }

                    return d;
                }
            });
        },
        tableDataFieldsFn() {
            let _jsonfields = {};
            this.tableColumns.filter((item) => {
                if (item.isShow) {
                    _jsonfields[item.label] = item.prop;
                }
            });

            return _jsonfields;
        }
    },
    methods: {
        getSearchData(){
            fetchData({
                postSearchData : JSON.stringify(this.postSearchData)
            }).then((res) => {
                this.columns = res.data;
            });
        },
        TalallColorMethod(percentage) {
            if (percentage <= 50) {
                return '#67c23a';
            } else if (percentage <= 75) {
                return '#e6a23c';
            } else {
                return '#f56c6c';
            }
        },
        handSearchIp(item){
            this.postData.filters.monid = item.MONID;

            this.getTableData();
        },
        getTableData(){
            this.loading = true;
            
            fetchData({
                postData: JSON.stringify(this.postData)
            }).then((res) => {
                this.dataTotal = res.dataTotal;
                this.tableData = res.data;

                this.loading = false;
            });
        },
        getPaginationCurPage(val) {
            this.postData.curPage = val;
            this.getTableData();
        },
        getPaginationPageSize(val) {
            // 分页大小改变之后，重置当前页码为 1
            this.postData.curPage = 1;
            this.postData.pageSize = val;

            this.getTableData();
        },
        // 获取子组件选择的时间
        getPickerDate(pickerDate){
            for (const key in pickerDate) {
                this.postData.filters[key] = pickerDate[key];
            }

            this.getTableData();
        },
        getChangeLie(val) {
            // 遍历表格列
            this.tableColumns.map((item, index) => {
                // 列的显示隐藏状态改变
            item.isShow = val.includes(item.label);
            });
        }
    },
    watch: {
        
    }
}
</script>

<style scoped>
.el-table .warning-row {
    background: oldlace;
}
.el-table .success-row {
    background: #f0f9eb;
}
.spanInfo{
    padding-right: 10px !important;
}
.searchIP{
    padding-bottom: 10px;
}
.textLable>>> .el-button+.el-button{
    margin-left: 0px !important; 
}
.IpButton{
    width: 100%;
    font-size: 14px;
}
.textLable .IpButton.selected {
    color: #fff;
    background-color: rgba(64, 158, 255);
}
</style>